<template>
  <div class="about-container">
    <n-card class="about-card" bordered>
      <div class="about-content">
        <p class="about-description">
          一个靠AI写出来的全景视频处理工具，用于辅助室内建模。
        </p>
        <div class="about-features">
          <h3>主要功能:</h3>
          <ul>
            <li>MP4转M3U8格式转换</li>
            <li>全景视频按时间间隔抽帧</li>
            <li>全景视频透视图提取（5视图/8视图）</li>
            <li>全景照片透视图提取</li>
          </ul>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { NCard, NButton, NAvatar } from 'naive-ui'

// 关闭窗口
const closeWindow = () => {
  window.close()
}

// 组件挂载时检查是否在独立窗口中
onMounted(() => {
  // 如果不是在独立窗口中，则显示提示
  if (!window.location.hash.includes('/about')) {
    console.warn('About组件应该在独立窗口中打开')
  }
})
</script>

<style scoped>
.about-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--color-background);
  padding: 20px;
}

.about-card {
  width: 100%;
  max-width: 350px;
  border-radius: 8px;
  overflow: hideen;
}

.about-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--color-background-soft);
  border-bottom: 1px solid var(--n-border-color);
}

.about-avatar {
  flex-shrink: 0;
}

.about-title-container {
  flex: 1;
}

.about-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--n-text-color-primary);
}

.about-version {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--n-text-color-disabled);
}

.about-content {
  padding: 20px;
}

.about-description {
  line-height: 1.6;
  color: var(--n-text-color);
  margin-bottom: 20px;
  font-size: 14px;
}

.about-features h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--n-text-color-primary);
}

.about-features ul {
  margin: 0;
  padding-left: 20px;
}

.about-features li {
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--n-text-color-secondary);
  line-height: 1.5;
}

.about-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--n-border-color);
  background-color: var(--color-background-soft);
}

.about-copyright {
  margin: 0;
  font-size: 12px;
  color: var(--n-text-color-disabled);
}
</style>